import React ,{PureComponent} from 'react';
import { connect } from 'react-redux';
import { actionCreators } from '../store/index';
import { Link } from 'react-router-dom';
import {
    NoteList,
    NoteItem,
    MoreNote
} from '../style.js';

class NoteListComponent extends PureComponent {

    render (){
        const { dataNote ,getMoreNoteList,page}  = this.props;
        const newdataNote = dataNote.toJS();
        return(
            <div>
                <NoteList>
                    {
                        newdataNote.map((val,index)=>{
                            return (
                                <Link key={index} to={'/Detail/'+val.id}>
                                    <NoteItem >
                                        <div className="left">
                                            <h3>{val.title}</h3>
                                            <p className="abstract">{val.desc}</p>
                                        </div>
                                        <div className="right">
                                            <img src={val.imgUrl} alt=""/>
                                        </div>
                                    </NoteItem>
                                </Link>
                            )
                        })
                    }
                </NoteList>
                <MoreNote onClick={() => getMoreNoteList(page)}>更多>>></MoreNote>
            </div>
        )
    };
 componentDidMount(){
     this.props.getHomeNoteList();
 };

}



const mapStateToProps = (state)=>{
    return {
        dataNote:state.getIn(['home','dataNote']),
        page:state.getIn(['home','articlePage'])
    }
}
const mapDispathToProps = (dispath)=>{
    return {
        getHomeNoteList(){
            dispath(actionCreators.getHomeNoteList())
        },
        getMoreNoteList(page){
            dispath(actionCreators.getMoreNoteList(page))
        }
    }
}

export default connect(mapStateToProps,mapDispathToProps)(NoteListComponent);